<template>
  <div class="message-container" ref="scrollContainer">
    <div class="messages">
      <div v-for="message in messages" :key="message.id" class="message">
        {{ message.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
    };
  },
  mounted() {
    let timer = setInterval(() => {
      this.addMessage();
      if(this.messages.length > 20) {
        clearInterval(timer)
      }
    }, 1000);
  },
  methods: {
    addMessage() {
      this.messages.push({ text: "123", id: Date.now() });
      this.$nextTick(() => {
        const container = this.$refs.scrollContainer;
        container.scrollLeft = container.scrollWidth;  // 关键修改:ml-citation{ref="1,3" data="citationList"}
      });
    },
  },
};
</script>

<style scoped>
.message-container {
  width: 200px;
  border: 1px solid;
  overflow-x: auto;  /* 启用横向滚动:ml-citation{ref="1" data="citationList"} */
  white-space: nowrap; /* 防止换行:ml-citation{ref="9" data="citationList"} */
}

.messages {
  display: inline-block; /* 确保内容横向排列:ml-citation{ref="4" data="citationList"} */
  min-width: 100%; /* 确保容器能扩展:ml-citation{ref="4" data="citationList"} */
}

.message {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid;
  padding: 5px;
}
</style>
